<template>
  <el-dialog :title="$t('produce.typeQuery')" :visible.sync="showDlg">
    <!-- 公司 -->
    <el-table
      v-loading="listLoading"
      :data="projectlist"
      height="400px"
      border
      fit
      highlight-current-row
      style="width: 100%;overflow:auto; margin:auto"
    >
      <el-table-column :label="$t('produce.typeNumber')" width="200" align="center">
        <template slot-scope="{row}">
          <span class="link-type" @click="getData(row)">{{ row.typeNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('produce.typeName')" width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.typeName }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">
        {{ $t('common.cancel') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getProjectList } from '@/api/project'
import { parseTime } from '@/utils'

export default {
  name: 'TypeQuery',
  props: {
    searchKey: {
      type: String,
      required: true,
      default: ''
    },
    showDlg: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      projectlist: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        state: 0,
        name: '',
        description: '',
        startTime: parseTime(Date.now(), '{y}-{m}-{d} 00:00:00'),
        endTime: '',
        sort: '+due_date'
      },
      temp: {
      },
      rules: {
      }
    }
  },
  watch: {
    showDlg: {
      deep: true,
      handler(val) {
        if (val) {
          this.searchProject(this.searchKey)
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.searchProject('')
    })
  },
  beforeDestroy() {
    this.companylist = []
  },
  methods: {
    // 初始化创建信息
    resetTemp() {
      this.temp = {
      }
    },
    searchProject(data) {
      this.listLoading = true
      getProjectList({ page: 1, limit: 50, name: data, sort: '-creat_time' }).then(response => {
        this.projectlist = response.data.projects
        this.listLoading = false
      })
    },
    // 选择数据
    getData(row) {
      var data = Object.assign({}, row) // copy obj
      this.$emit('getData', data.projectNo)
    },
    closeDialog() {
      this.$emit('closeDlg')
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  height: 800px;
  background-color: white;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px x0;
    //margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
